<template>
  <div class="visitsDemo">
    <div class="tabs">
      <!-- <div
        class="tab"
        v-for="(item, index) in tabs"
        :key="index"
        @click="getList(index)"
        :class="{ active: activeTab === index }"
      >
        {{ item.name }}
      </div> -->
      <!-- <span style="font-size: 30px;color: #fff;">应该是个图</span> -->

    </div>
    <!-- api调用列表图 -->
    <div class="visits-demo" ref="visitsDemo" style="width: 100%; height: 300px"></div>
  </div>
</template>
<script>
import { getApiRanking } from "@/utils/httpUtils";
import * as echarts from "echarts";
export default {
  data() {
    return {
      datas: {
        // "apiId": "1",
        // "monitorQueryType": "Api_Usage",
        // "userId": "1",
        // "version": "",
        // "dateFrom": "now-1w",
        // "dateTo": "now",
        // "page": "1",
        // "size": "10",
        // "fieId": "",
        // "order": ""


        "apiId": "",
        "monitorQueryType": "Api_Usage",
        "userId": "",
        "version": "",
        "dateFrom": "now-1w",
        "dateTo": "now",
        "page": "",
        "size": "",
        "fieId": "",
        "order": ""

      },
      // myChart: null,
      // activeTab: 0,
      // tabs: [{ name: "近30天访问趋势" }, { name: "24小时访问趋势" }],
    };
  },

  created() {
    this.getList();
  },
  methods: {
    getList(type) {

      getApiRanking(this.datas).then((res) => {
        console.log(res, 999999999999999999);

        // res = {
        //   "data": [
        //     {
        //       "apiName": "不动产查询接口",
        //       "latency": 19.32255628032069,
        //       "usage": 31
        //     }, {
        //       "apiName": "不动接口",
        //       "latency": 19.32255628032069,
        //       "usage": 3
        //     }, {
        //       "apiName": "不动询接口",
        //       "latency": 19.32255628032069,
        //       "usage": 25
        //     },
        //     {
        //       "apiName": "不动产查询接口",
        //       "latency": 19.32255628032069,
        //       "usage": 9
        //     }
        //   ],
        //   "pagination": {
        //     "page": 1,
        //     "size": 10,
        //     "total": 1
        //   }
        // }
        let xData = []
        let yData = []
        res.map(function (item) {
          console.log(item);
          xData.push(item.apiName)
          yData.push(item.usage)
        })
        console.log(xData, yData);

        const chartDom = this.$refs.visitsDemo;
        this.myChart = echarts.init(chartDom);
        const option = {
          color: ["#1890FF"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              // type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: xData,
              boundaryGap: false,
              axisTick: {
                show: false, // 不显示坐标轴刻度线
              },
              splitLine: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                color: "rgba(230, 247, 255, 0.50)",
                fontSize: 14,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              //y右侧文字
              axisLabel: {
                color: "rgba(230, 247, 255, 0.50)",
                fontSize: 16,
              },
              // y轴的分割线
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: "rgba(230, 247, 255, 0.20)",
                },
              },
            },
          ],
          series: [
            {

              name: "访问次数",
              type: "line",
              // smooth: true,
              // symbol: "none", // 不显示连接点
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: "line", // 默认为直线，可选为：'line' | 'shadow'
                },
              },
              itemStyle:{
                normal:{
                  label:{
                    show:true
                  }
                }
              },
              lineStyle: {
                width: 3,
                shadowColor: "#1890FF",
                shadowBlur: 20,

              },
              areaStyle: {
                opacity: 1,
                //右下左上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(24, 144, 255, .5)",
                  },
                  {
                    offset: 0.3,
                    color: "rgba(24, 144, 255, 0.2)",
                  },
                  {
                    offset: 1,
                    color: "rgba(24, 144, 255, 0)",
                  },
                ]),
              },
              data: yData,
            },
          ],
        };
        this.myChart.setOption(option); // 更新图表数据
      });
    },
  },
};
</script>
<style scoped>
.visitsDemo {
  position: relative;
}

.visitsDemo .tabs {
  position: absolute;
  top: -30px;
  right: 0;
  z-index: 999;
  display: flex;
  color: #fff;
}

.tab {
  cursor: pointer;
  margin-right: 10px;
}

.active {
  color: #198ef8;
  border-bottom: 1px solid #198ef8;
}
</style>
